import QtQuick 2.0

Item {
    id: root
    anchors.fill: parent

    PathView {
        anchors.fill: parent
        delegate: flipCardDelegate
        model: 30
        path: Path {
            // 路径开始的位置
            startX: root.width / 2
            startY: 0
            // 路径属性：z轴
            PathAttribute { name: "itemZ"; value: 0 }
            // 上半部分首部项倾斜角度
            PathAttribute { name: "itemAngle"; value: -90.0; }
            // 上半部分首部项缩放比例
            PathAttribute { name: "itemScale"; value: 0.5; }
            // 上半部分路径
            PathLine { x: root.width/2; y: root.height*0.45; }

            // 中上部路径每个元素之间的覆盖比例
            PathPercent { value: 0.48; }
            PathLine { x: root.width/2; y: root.height*0.5; }
            // 中部缩放属性
            PathAttribute { name: "itemAngle"; value: 0.0; }
            PathAttribute { name: "itemScale"; value: 1.0; }
            PathAttribute { name: "itemZ"; value: 100 }
            PathLine { x: root.width/2; y: root.height*0.6; }

            // 下部项间距
            PathPercent { value: 0.52; }
            PathLine { x: root.width/2; y: root.height; }
            PathAttribute { name: "itemAngle"; value: 90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathAttribute { name: "itemZ"; value: 0 }
        }
        // 可见项总数
        pathItemCount: 16
        // 高亮区间
        preferredHighlightBegin: 0.2
        preferredHighlightEnd: 0.8

        Component {
            id: flipCardDelegate
            Item {
                property variant rotX: PathView.itemAngle

                id: wrapper
                width: 64
                height: 64
                // 是否在路径上
                visible: PathView.onPath
                // 缩放由PathView控制
                scale: PathView.itemScale
                // 堆叠关系由PathView控制
                z: PathView.itemZ
                // 首位旋转角度
                transform: Rotation { axis { x: 1; y: 0; z: 0 } angle: wrapper.rotX; origin { x: 32; y: 32; } }
                Rectangle {
                    anchors.fill: parent
                    color: "lightblue"
                    border.color: "white"
                    border.width: 3
                }
                Text {
                    anchors.centerIn: parent
                    text: index
                    font.pixelSize: 30
                }
            }
        }
    }
}
